import ElementUI from 'element-ui'
import baseURL from '@/views/process/dag/DagEdit'

// class myWebSocket extends WebSocket{
//     data = 'http://192.168.137.221:8000/media/test.png'
// }

// eslint-disable-next-line camelcase
let ws_data = { }
let graph = null

function initWebSocket (data) {
  const wsUri = 'ws://127.0.0.1:8000/ws/'
  this.socket = new WebSocket(wsUri)// 这里面的this都指向vue
  this.socket.onerror = webSocketOnError
  this.socket.onmessage = webSocketOnMessage
  this.socket.onclose = closeWebsocket
  graph = data
  console.log('看看websocket的graph：', graph)
}

function webSocketOnError (e) {
  ElementUI.Notification({
    title: '',
    message: 'WebSocket连接发生错误' + JSON.stringify(e),
    type: 'error',
    position: 'bottom-right',
    duration: 3000
  })
}
function webSocketOnMessage (e) {
  const data = JSON.parse(e.data)
  // console.log(data)
  if (data.contentType === 'INFO') {
    // ElementUI.Notification({
    //   title: 'websocket',
    //   message: data.content,
    //   type: 'success',
    //   position: 'bottom-right',
    //   duration: 3000
    // })
  } else if (data.contentType === 'ERROR') {
    ElementUI.Notification({
      title: '',
      message: data.content,
      type: 'error',
      position: 'bottom-right',
      duration: 0
    })
    const node = graph.getCell(data.content.node_id)
    if (data.content.status === 'fail') {
      node.setAttrs({
        body: {
          fill: '#ff1b1b',
          stroke: '#2c6fff',
          fillOpacity: '1',
          strokeOpacity: '1'
        },
        label: {
          fill: '#ffffff'
        },
        path: {
          fill: '#ffffff'
        },
        path2: {
          fill: '#ffffff'
        }
      })
    }
  } else if (data.contentType === 'TEXT') {
    ElementUI.Notification({
      title: '温馨提示',
      message: data.content,
      type: 'success',
      position: 'bottom-right',
      duration: 0
    })
  } else {
    if (typeof ws_data[data.content.node_id] === 'undefined') {
      ws_data[data.content.node_id] = {}
      ws_data[data.content.node_id].img = []
    }
    if (ws_data[data.content.node_id]?.img.length >= 10) {
      console.log('too many images, pop')
      ws_data[data.content.node_id].img.shift()
    }
    ws_data[data.content.node_id].img.push(data.content.img)
    ws_data[data.content.node_id].status = data.content.status
    ws_data[data.content.node_id].info = data.content.info
    // 找到graph中对应的node
    const node = graph.getCell(data.content.node_id)
    if (data.content.status === 'success') {
      node.setAttrs({
        body: {
          fill: '#19b000',
          stroke: '#2c6fff',
          fillOpacity: '1',
          strokeOpacity: '1'
        },
        label: {
          fill: '#ffffff'
        },
        path: {
          fill: '#ffffff'
        },
        path2: {
          fill: '#ffffff'
        }
      })
    }
    // ws_data[data.content.node_id] = { img: data.content.img, status: data.content.status, info: data.content.info }
    console.log('ws_data测试', ws_data)
    console.log(baseURL)
  }
}
// 关闭websocket
function closeWebsocket () {
  console.log('连接已关闭...')
  close()
}
function close () {
  this.socket.close() // 关闭 websocket
  this.socket.onclose = function (e) {
    console.log(e)// 监听关闭事件
    console.log('关闭')
  }
}
function webSocketSend (message) {
  this.socket.send(JSON.stringify(message))
}

function getWsData () {
  const newData = ws_data
  return newData
}

function clearWsData () {
  ws_data = {}
}

export default {
  initWebSocket, close, webSocketSend, ws_data, getWsData, clearWsData
}
